<script setup lang="ts">
import { useRole } from "./utils/hook";
import { ref } from "vue";

const tableRef = ref();

const { loading, columns, dataList } = useRole(tableRef);

// 添加统计数据
const statisticsData = ref({
  totalAccounts: 186,
  todayDeactivated: 8,
  todayAmount: 254.835
});
</script>

<template>
  <div class="main">
    <!-- 添加统计卡片 -->
    <div class="statistics-cards mb-4 grid grid-cols-3 gap-4">
      <el-card shadow="hover" class="statistics-card">
        <div class="flex flex-col">
          <span class="text-gray-600 mb-2">账户总数</span>
          <span class="text-3xl font-bold">{{
            statisticsData.totalAccounts
          }}</span>
        </div>
      </el-card>
      <el-card shadow="hover" class="statistics-card">
        <div class="flex flex-col">
          <span class="text-gray-600 mb-2">今日有消耗账户数</span>
          <span class="text-3xl font-bold">{{
            statisticsData.todayDeactivated
          }}</span>
        </div>
      </el-card>
      <el-card shadow="hover" class="statistics-card">
        <div class="flex flex-col">
          <span class="text-gray-600 mb-2">今日账户消耗总金额(USD)</span>
          <span class="text-3xl font-bold">{{
            statisticsData.todayAmount
          }}</span>
        </div>
      </el-card>
    </div>

    <div class="bg-bg_color p-4">
      <pure-table
        ref="tableRef"
        align-whole="center"
        showOverflowTooltip
        table-layout="auto"
        :loading="loading"
        :size="'default'"
        :data="dataList"
        :columns="columns"
        :header-cell-style="{
          background: 'var(--el-fill-color-light)',
          color: 'var(--el-text-color-primary)'
        }"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.statistics-cards {
  padding: 16px;
  background-color: var(--el-bg-color);
}

.statistics-card {
  :deep(.el-card__body) {
    padding: 20px;
  }
}
</style>
